<template>
	<view class="relative full-screen">
		<view style="z-index:0;position:absolute;left:0;right:0;top:0;height:395px;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);"></view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
					<template #left>
						<image class="size-32" src="@/static/svg/icon-back.svg" />
					</template>
					<view class="flex center w-full fs-16 text-black">积分订单</view>
				</uni-nav-bar>
				<view class="mx-16 mt-16 radius-8 bg-white px-16 py-4 h-38 flex item-center">
					<image class="w-20 h-20 mr-4 flex-shrink" src="@/static/svg/icon-search.svg"></image>
					<input v-model="queryParams.activeTitle" class="fs-12 flex-1" placeholder="搜商品名称" placeholder-class="c9" />
					<image v-if="queryParams.activeTitle" class="w-18 h-18 ml-4" src="@/static/svg/icon-input-clean.svg" @click="cleanSearch"></image>
					<view class="ml-12 flex-shrink fs-16 color-primary" @click="doSearch">搜索</view>
				</view>
				<scroll-view scroll-x class="order-status-tabs px-16 my-16" scroll-with-animation :scroll-left="scrollLeft">
					<view v-for="(tab,i) in orderStatusTabs" :key="i" class="tab-item" :class="queryParams.orderState===tab.code ? 'active text-color-regular fs-16 text-bold':'text-color-hint fs-15'" @click="onOrderStatusTabClick(tab, i)">
						<text>{{tab.name}}</text>
					</view>
				</scroll-view>
			</template>
			<view class="flex-col">
				<OrderListItem
					v-for="(item,i) in dataList"
					:key="i"
					:data="item"
					:viewOrderType="currentOrderType"
					@onOrderUdate="queryList"
					class="mx-16 mb-12 radius-12 overflow-hidden"
				/>
			</view>
			<template #empty>
				<view class="flex-col item-center">
					<image style="height:140px;" src="@/static/svg/order/empty-order.svg"></image>
					<text class="mt-4 fs-12">暂无相关订单～</text>
				</view>
			</template>
			<template #loadingMoreNoMore>
				<view :style="`height:calc(120px + ${safeAreaBottom}px);`">
					<view class="text-center text-color-hint fs-14">到底了～</view>
				</view>
			</template>
			<template #bottom>
				<view v-if="dataList && dataList.length" :style="`padding-bottom: ${safeAreaBottom}px;`">
					<button class="radius-8 bg-white mx-16 mb-16 color-primary fs-16 border-primary" @click="showExport">订单导出</button>
				</view>
			</template>
		</z-paging>
		<ExportPopup ref="exportPopupRef" />
	</view>
</template>

<script setup name="Order">
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import {computed,onMounted,ref,unref,getCurrentInstance} from 'vue'
	import {pagePointsOrderApi} from '@/pagesF/api/index.js'
	import OrderListItem from './components/OrderListItem.vue'
	import ExportPopup from './components/ExportPopup.vue'
	
	const instance = getCurrentInstance()

	const navBar = ref(null)
	
	const exportPopupRef = ref(null)
	const showExport = () => {
		exportPopupRef.value && exportPopupRef.value.showDialog(true)
	}
	
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets.bottom
	})
	
	const goBack = () => uni.navigateBack()
	
	const cleanSearch = () => {
		queryParams.value.activeTitle = ''
		doSearch()
	}
	
	const doSearch = () => {
		queryParams.value.pageNum = 1
		paging.value.reload()
	}
	const currentOrderType = ref(1)
	const subOrderType = ref(1)
	const onSubOrderTypeClick = (tab) => {
		if (tab.value !== subOrderType.value) {
			subOrderType.value = tab.code
			queryParams.value.pageNum = 1
			paging.value.reload()
		}
	}
	// 订单状态
	const orderStatusTabs = ref([
		{ name: '全部', code: '' },
		{ name: '待支付', code: 1 },
		{ name: '待核销', code: 2 },
		{ name: '已完成', code: 3 },
		{ name: '已关闭', code: 4 }
	])
	const scrollLeft = ref(0)
	const onOrderStatusTabClick = (tab, i) => {
		if (tab.code !== queryParams.value.orderState) {
			scrollLeft.value = i * 40
			queryParams.value.orderState = tab.code
			queryParams.value.pageNum = 1
			paging.value.reload()
		}
	}
	
	const paging = ref(null)
	const dataList = ref([])
	const queryParams = ref({
		activeTitle: '',
		orderState: '', // 订单状态：1-待支付, 2-待核销, 3-已完成, 4-已关闭
		pageNum: 1,
		pageSize: 10,
	})
	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		pagePointsOrderApi(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}
	
	onMounted(() => {
	})
	
	onShareAppMessage((options) => {
		console.log('邀请好友', options)
		const activityId = options.target.dataset.activityId;
		const target = dataList.value.find(item=>item.activeId===activityId);
		const url = target?.promotionType==='GROUP_BUY'
				?`/pagesB/activity/activity-group-buy`
				:`/pagesB/activity/activity`;
		const params = {};
		if(target.groupBuyOrderInfo.groupBuyOrderId){
			params.groupBuyOrderId = target.groupBuyOrderInfo.groupBuyOrderId;
		}
		const paramsArr = Object.keys(params).map(key=>`${key}=${params[key]}`);
		if(paramsArr.length){
			paramsArr.unshift('');
		}
		const paramsStr = paramsArr.join('&');
		return {
			title: options.target.dataset.title,
			path: `${url}?id=${activityId}&code=${options.target.dataset.shareCode}${paramsStr}&_from=FOrder`,
			imageUrl: options.target.dataset.filepath
		}
	})
</script>

<style lang="scss" scoped>
	.order-status-tabs {
		overflow: auto;
		white-space: nowrap;
		
		.tab-item {
			display: inline-flex;
			height: 30px;
			
			&:not(:last-child) {
				margin-right: 36px;
			}
		}
		.active {
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 15%;
				height: 4px;
				width: 70%;
				border-radius: 4px;
				background: $uni-primary;
			}
		}
	}
</style>